<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='global-property-S-'>/**
</span> * @fileOverview 菜单项
 * @ignore
 */

var $ = require(&#39;jquery&#39;),
  BUI = require(&#39;bui-common&#39;),
  Component =  BUI.Component,
  UIBase = Component.UIBase,
  PREFIX = BUI.prefix,
  CLS_OPEN = PREFIX + &#39;menu-item-open&#39;,
  CLS_CARET = &#39;x-caret&#39;,
  CLS_COLLAPSE = PREFIX + &#39;menu-item-collapsed&#39;,
  DATA_ID = &#39;data-id&#39;;

<span id='BUI-Menu-MenuItemView'>/**
</span> * @private
 * @class BUI.Menu.MenuItemView
 * @mixins BUI.Component.UIBase.ListItemView
 * @mixins BUI.Component.UIBase.CollapsableView
 * 菜单项的视图类
 */
var menuItemView = Component.View.extend([UIBase.ListItemView,UIBase.CollapsableView],{

  _uiSetOpen : function (v) {
    var _self = this,
      cls = _self.getStatusCls(&#39;open&#39;);
    if(v){
      _self.get(&#39;el&#39;).addClass(cls);
    }else{
      _self.get(&#39;el&#39;).removeClass(cls);
    }
  }
},{
  ATTRS : {
  }
},{
  xclass:&#39;menu-item-view&#39;
});

<span id='BUI-Menu-MenuItem'>/**
</span> * 菜单项
 * @class BUI.Menu.MenuItem
 * @extends BUI.Component.Controller
 * @mixins BUI.Component.UIBase.ListItem
 */
var menuItem = Component.Controller.extend([UIBase.ListItem,UIBase.Collapsable],{
<span id='BUI-Menu-MenuItem-method-renderUI'>  /**
</span>   * 渲染
   * @protected
   */
  renderUI : function(){
    var _self = this,
      el = _self.get(&#39;el&#39;),
      id = _self.get(&#39;id&#39;),
      temp = null;
    //未设置id时自动生成
    if(!id){
      id = BUI.guid(&#39;menu-item&#39;);
      _self.set(&#39;id&#39;,id);
    }
    el.attr(DATA_ID,id);   
  },
<span id='BUI-Menu-MenuItem-method-handleMouseEnter'>   /**
</span>   * 处理鼠标移入
   * @protected
   */
  handleMouseEnter : function (ev) {
    var _self = this;

    if(this.get(&#39;subMenu&#39;) &amp;&amp; this.get(&#39;openable&#39;)){
      this.set(&#39;open&#39;,true);
    }
    menuItem.superclass.handleMouseEnter.call(this,ev);
  },
<span id='BUI-Menu-MenuItem-method-handleMouseLeave'>  /**
</span>   * 处理鼠标移出
   * @protected
   */
  handleMouseLeave :function (ev) {
    if(this.get(&#39;openable&#39;)){
      var _self = this,
        subMenu = _self.get(&#39;subMenu&#39;),
        toElement = ev.toElement || ev.relatedTarget;;
      if(toElement &amp;&amp; subMenu &amp;&amp; subMenu.containsElement(toElement)){
        _self.set(&#39;open&#39;,true);
      }else{
        _self.set(&#39;open&#39;,false);
      }
    }
    menuItem.superclass.handleMouseLeave.call(this,ev);
  },
<span id='BUI-Menu-MenuItem-method-containsElement'>  /**
</span>   * 自己和子菜单是否包含
   * @override
   */
  containsElement:function (elem) {
    var _self = this,
      subMenu,
      contains = menuItem.superclass.containsElement.call(_self,elem);
    if(!contains){
      subMenu = _self.get(&#39;subMenu&#39;);
      contains = subMenu &amp;&amp; subMenu.containsElement(elem);
    }
    return contains;
  }, 
  //设置打开子菜单 
  _uiSetOpen : function (v) {
    if(this.get(&#39;openable&#39;)){
      var _self = this,
        subMenu = _self.get(&#39;subMenu&#39;),
        subMenuAlign = _self.get(&#39;subMenuAlign&#39;);
      if(subMenu){
        if(v){
          subMenuAlign.node = _self.get(&#39;el&#39;);
          subMenu.set(&#39;align&#39;,subMenuAlign);
          subMenu.show();
        }else{
          var menuAlign = subMenu.get(&#39;align&#39;);
          //防止子菜单被公用时
          if(!menuAlign || menuAlign.node == _self.get(&#39;el&#39;)){
            subMenu.hide();
          }
          
        }
      }
    }
  },
  //设置下级菜单
  _uiSetSubMenu : function (subMenu) {
    if(subMenu){
      var _self = this,
        el = _self.get(&#39;el&#39;),
        parent = _self.get(&#39;parent&#39;);
      //设置菜单项所属的菜单为上一级菜单
      if(!subMenu.get(&#39;parentMenu&#39;)){
        subMenu.set(&#39;parentMenu&#39;,parent);
        if(parent.get(&#39;autoHide&#39;)){
          if(parent.get(&#39;autoHideType&#39;) == &#39;click&#39;){
            subMenu.set(&#39;autoHide&#39;,false);
          }else{
            subMenu.set(&#39;autoHideType&#39;,&#39;leave&#39;);
          }
          
        } /**/
      }
      $(_self.get(&#39;arrowTpl&#39;)).appendTo(el);
    }
  },
<span id='BUI-Menu-MenuItem-method-destructor'>  /** 
</span>   * 析构函数
   * @protected
   */
  destructor : function () {
    var _self = this,
      subMenu = _self.get(&#39;subMenu&#39;);
    if(subMenu){
      subMenu.destroy();
    }
  }

},{
  ATTRS : 
  {
<span id='BUI-Menu-MenuItem-property-elTagName'>    /**
</span>     * 默认的Html 标签
     * @type {String}
     */
    elTagName : {
        value: &#39;li&#39;
    },
    xview : {
      value : menuItemView
    },
<span id='BUI-Menu-MenuItem-cfg-open'>    /**
</span>     * 菜单项是否展开，显示子菜单
     * @cfg {Boolean} [open=false]
     */
<span id='BUI-Menu-MenuItem-property-open'>    /**
</span>     * 菜单项是否展开，显示子菜单
     * @type {Boolean}
     * @default false
     */
    open :{
      view : true,
      value : false
    },
<span id='BUI-Menu-MenuItem-property-openable'>    /**
</span>     * 是否可以展开
     * @type {Boolean}
     */
    openable : {
      value : true
    },
<span id='BUI-Menu-MenuItem-cfg-subMenu'>    /**
</span>     * 下级菜单
     * @cfg {BUI.Menu.Menu} subMenu
     */
<span id='BUI-Menu-MenuItem-property-subMenu'>    /**
</span>     * 下级菜单
     * @type {BUI.Menu.Menu}
     */
    subMenu : {
      view : true
    },
<span id='BUI-Menu-MenuItem-property-subMenuAlign'>     /**
</span>     * 下级菜单和菜单项的对齐方式
     * @type {Object}
     * @default 默认在下面显示
     */
    subMenuAlign : {
      valueFn : function (argument) {
        return {
           //node: this.get(&#39;el&#39;), // 参考元素, falsy 或 window 为可视区域, &#39;trigger&#39; 为触发元素, 其他为指定元素
           points: [&#39;tr&#39;,&#39;tl&#39;], // [&#39;tr&#39;, &#39;tl&#39;] 表示 overlay 的 tl 与参考节点的 tr 对齐
           offset: [-5, 0]      // 有效值为 [n, m]
        }
      }
    },
<span id='BUI-Menu-MenuItem-property-arrowTpl'>    /**
</span>     * 当存在子菜单时的箭头模版
     * @protected
     * @type {String}
     */
    arrowTpl : {
      value : &#39;&lt;span class=&quot;&#39; + CLS_CARET + &#39; &#39; + CLS_CARET + &#39;-left&quot;&gt;&lt;/span&gt;&#39;
    },
    events : {
      value : {
        &#39;afterOpenChange&#39; : true
      }
    },
    subMenuType : {
      value : &#39;pop-menu&#39;
    }
  },
  PARSER : {
    subMenu : function(el){
      var 
        subList = el.find(&#39;ul&#39;),
        type = this.get(&#39;subMenuType&#39;),
        sub;
      if(subList &amp;&amp; subList.length){
        sub = BUI.Component.create({
          srcNode : subList,
          xclass : type
        });
        if(type == &#39;pop-menu&#39;){
          subList.appendTo(&#39;body&#39;);
          sub.setInternal({
            autoHide : true,
            autoHideType : &#39;leave&#39;
          });
        }else{
          this.get(&#39;children&#39;).push(sub);
        }
      }
      return sub;
    }
  }
},{
  xclass : &#39;menu-item&#39;,
  priority : 0
});

var separator = menuItem.extend({

},{
  ATTRS : {
    focusable : {
      value : false
    },
    selectable:{
      value : false
    },
    handleMouseEvents:{
      value:false
    }
  }
},{
  xclass:&#39;menu-item-sparator&#39;
});

menuItem.View = menuItemView;
menuItem.Separator = separator;

module.exports = menuItem;
</pre>
</body>
</html>
